<template>
	<div class="groupCommodityDetail">
		<div>
			<van-nav-bar 
			fixed 
			title="商品详情" 
			left-text="" 
			left-arrow 
			@click-left="retreat" 
			@click-right="onClickRight" >
			
			 <!-- <van-icon name="search" slot="right" /> -->
			 <van-icon name="ellipsis" slot="right" />
			</van-nav-bar>
		</div>
		<div class="lunbo">
			<van-swipe :autoplay="3000" :height="300" indicator-color="white">
				<van-swipe-item v-for="(image, index) in commodityData.productImages" :key="index">
					<img v-lazy="image.imageUrl" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 价格 评论 -->
		<div>
			<!-- 价格 -->
			<div class="price">
				<div class="price_left">
					<div class="pl_top">
						<div class="pl_text1">拼团购</div>
						<div class="pl_text">2人团</div>
						<div class="pl_text">拼团包邮</div>
					</div>
					<div class="pl_bottom" v-for="item in commodityData.repository" :key="item.id">
						<div class="price_new">
							<div><b><span class="pl_new">￥{{item.price}}</span></b></div>
							<div class="pl_old">￥{{item.price*2}}</div>
						</div>
						<div class="group_count">
							已团{{item.count}}人
						</div>
					</div>
				</div>
			</div>
			<div class="bg_onws ">
				<div class="sp_detone">
					<p class="sp_text">{{commodityData.name}}</p>
				</div>
				<div class="sp_detone gb_info">
					<div class="gb_hint">
						<p>有<span class="gb_count"> 2 </span>人在拼团，参与可直接成团噢~</p>
					</div>
					<!-- <div class="gb_list">
						<div class="gb_user">
							<div class="gb_tx">
								<img src="https://image.soole.com.cn/000e22a9-e240-47c1-a9cd-cc4b68b7cd82" alt="">
							</div>
							<div class="gb_nickname">
								<p>一枝梨花压海棠</p>
								<p>ID：254545</p>
							</div>
						</div>
						<div class="gb_time_operation">
							<div class="gb_time">
								<p>还差1人成团</p>
								<p>仅剩{{hours|stringJoints('0')}}:{{minutes|stringJoints('0')}}:{{seconds|stringJoints('0')}}</p>
							</div>
							<div class="gb_operation">
								<van-button color="#FF1B28" @click="groupBookingDetail">一键成团</van-button>
							</div>
						</div>
					</div> -->

					<div class="gb_list" v-for="item in gbUserData" :key="item.id">
						<div class="gb_user">
							<div class="gb_tx">
								<img :src="item.img_url" alt="">
							</div>
							<div class="gb_nickname">
								<p>{{item.name}}</p>
								<p>ID：{{item.id}}</p>
							</div>
						</div>
						<!--  -->
						<div class="gb_time_operation">
							<div class="gb_time">
								<p>还差1人成团</p>
								<p>仅剩{{item.hms.hours|stringJoints()}}:{{item.hms.minutes|stringJoints()}}:{{item.hms.seconds|stringJoints()}}</p>
							</div>
							<div class="gb_operation">
								<van-button color="#FF1B28" @click="goodsPurchase()">一键成团</van-button>
							</div>
							<!-- <div class="gb_operation">
								<van-button color="#FF1B28" @click="groupBookingDetail(item)">一键成团</van-button>
							</div> -->
						</div>
					</div>

				</div>

				<div class="sp_dettwo" @click="evaluation()">
					<div class="spde_side">已有评论（{{commodityData.comment_num}}）条</div>
					<div class="spde_cont">
						<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/pl.png">
					</div>
				</div>
			</div>
			<!-- 提示 产品属性 电话-->
			<div class="bg_onw">
				<div class="sp_detfour">
					<div class="spdd_one">
						<ul>
							<li>
								<div class="spdd_side spdd_color">温馨提示</div>
								<div class="spdd_cont"><span>为了您的权益，下单前请联系客服咨询</span></div>
							</li>
							<li>
								<div class="spdd_side spdd_color">客服电话</div>
								<div class="spdd_cont"><span>{{commodityData.customer_service_phone}}</span></div>
							</li>
						</ul>
					</div>
				</div>
				<!-- 地址 -->
				<div class="sp_detfour">
					<div class="spdd_one">
						<ul>
							<li>
								<div class="spdd_side spdd_color">发货时间</div>
								<div class="spdd_cont"><span>第七天内发货（从下单当日起）</span></div>
							</li>
							<li>
								<div class="spdd_side spdd_color">规格型号</div>
								<div class="spdd_cont">
									<span v-for="item in commodityData.repository" :key="item.id">{{item.product_detail_group_name}}</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div style="overflow: scroll;">
					<div class="sp_detfive">
						<div class="spd_tit">商品详情</div>
						<div id="spd_center" class="spd_center" v-html="commodityData.detail"></div>
					</div>
				</div>
			</div>
		</div>
		
		
		<div class="van-goods-action">
			<div role="button" tabindex="0" class="van-goods-action-icon" @click="collect()">
				<div :class="[
					'van-icon',
					isA?'van-icon-star':'van-icon-star-o', 
					isA?'collect_lcon':'',
					'van-goods-action-icon__icon'
					]">
					<!---->
				</div>收藏
			</div>
			<div role="button" tabindex="0" class="van-goods-action-icon" @click="ShopLink()">
				<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
					<!---->
				</div>店铺
			</div>
			 <button @click="shoppingTrolley" class="van-button van-button--default van-button--large van-button--square van-goods-action-button van-goods-action-button--first"
			 style="color: rgb(255, 255, 255); background: rgb(252, 40, 93); border-color: rgb(252, 40, 93);">
			 <span class="van-button__text">￥636</span>
			 <span class="van-button__text">单独购买</span>
			 </button>
			<button @click="goodsPurchase"  class="van-button van-button--default van-button--large van-button--square van-goods-action-button van-goods-action-button--last"
			 style="color: rgb(255, 255, 255); background: rgb(255, 27, 40); border-color: rgb(255, 27, 40);">
			 <span class="van-button__text">￥318</span>
			 <span class="van-button__text">一键开团</span>
			 </button>
		</div>
		
		<van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
			<commdPurchase :commodityData="commodityData" :source="source"></commdPurchase>
		</van-popup>
	<!-- <loading v-show="bool"></loading> -->
	</div>
	<!--回到顶部-->
	<!-- <goTop></goTop> -->
</template>
<script>
	import commdPurchase from './commdPurchase';
	import loading from '../purchase/loading.vue';
	export default {
		data() {
			return {
				timer: 0, //计时器
				
				show: false,
				bool:false,//加载
				source: 1, //是加入购物车，还收购物
				commodityData: {}, //数据
				gbUserData:[
					{
					id:'45912',
					name:'用户1',
					img_url:'https://image.soole.com.cn/000e22a9-e240-47c1-a9cd-cc4b68b7cd82',
					hms:{
						hours:'00',
						minutes: '00',
						seconds: '00'
					},
					maxtime:0,//时间戳
					},
					{
					id:'02684',
					name:'用户2',
					img_url:'https://image.soole.com.cn/000e22a9-e240-47c1-a9cd-cc4b68b7cd82',
					hms:{
						hours: '00',
						minutes:'00',
						seconds: '00'
					},
					maxtime:0,//时间戳
					},
					],//拼团用户数据
				isA:false,//是否收藏
			}
		},
		created() {
			this.getCommdInfo();
		},
		methods: {
			// 商品信息
			async getCommdInfo(){
				this.bool = true;
				let Id= this.$route.query.id;
				var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
				var userId=list.userId
				var token = localStorage.getItem('token');
				let params = {}
				if (!userId) {
				  params = {
				    goods_id:Id
				  };
				}else {
				  params = {
				    goods_id:Id,
				    user_id:userId
				  };
				}
				const res = await this.$axios.post(this.$api.goodsDetailedData, params);
				if (res.success) {
				  this.commodityData = res.data;
				  if(res.data.collection){
				    this.isA=true
				  }
				} else {
				  this.$toast(res.msg);
				}
				console.log(res)
				this.bool = false;
			},
			// 跳转店铺
			ShopLink(){
				let commodityData = this.commodityData;
			  this.$router.push({path: '/Shop', query:{name:commodityData.shop.name,shop_id:commodityData.shop.id}})
			},
			//点击收藏
			async collect() {
			  let Id= this.$route.query.id;
			  var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
			  var userId=list.userId
			  var token = this.$cookies.get("token")||localStorage.getItem('token');
			  if (!userId) {
			    localStorage.setItem('beforeLoginUrl',"ProductDetails?id="+this.$base.getQueryString("Id"));
			    this.$router.push({path:'/login'})
			  }else {
			    let params = {
			      product_id: Id,
			    };
			    const res = await this.$axios.post(this.$api.collectProductData, params);
				// console.log(res);
				  if (res.isfiag == 1) {//数据库中没有收藏,点击收藏操作
			        params = {
			          product_id: Id,
			          user_id:userId
			        };
			        res.isfiag = 1
			      } else {//数据库存在收藏,点击删除收藏操作
			        params = {
			          product_id: Id,
			          user_id:userId
			        };
			        res.isfiag = 0
			      }
				  const res1 = await this.$axios.post(this.$api.collectProductData, params);
				  this.$toast(res1.msg);
				  if(!res.isfiag){this.isA = !this.isA}
			    }
			},
			
			//倒计时
			countDown(item) {
				// 先算出剩余时间有多少小时，这些小时有多少个24小时 不满24小时的及为剩余多少小时
				// this.hours = Math.floor(maxtime / 60 % 24);
				// // 换算 多少分钟 满足60分的为小时数 不满60分的及为剩余分钟数
				// this.minutes = Math.floor(maxtime / 60 % 60);
				// // 满足60秒的为分钟数 不满60秒的及为剩余秒数
				// this.seconds = Math.floor(maxtime % 60);
				item.hms = {
					hours: Math.floor(item.maxtime / 60 / 60 % 24),
					minutes: Math.floor(item.maxtime / 60 % 60),
					seconds: Math.floor(item.maxtime  % 60)
				}
				
				//判断总的秒数是否小于=0 是则结束定时器
				if (item.maxtime <= 0) {
					return item.maxtime;
				}
				// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
				// var msg = "距离结束还有"+ h +"时"+ m + "分" + s + "秒";
				// console.log(msg);
				// console.log(maxtime) 
			},
			// 设置定时器
			startTimer() {
				this.gbUserData.forEach(item=>{
					let h = Math.ceil(Math.random()*23)+1;
					if(h<=2){
						h +=3
					}
					item.maxtime = h * 60 * 60;
					// console.log(h);
					item.$timer = setInterval(() => {
						var curTime = this.countDown(item);
						if (curTime <= 0) {
							clearInterval(curTime);
							item.curTime = null;
						}
						item.maxtime -= 1;
					}, 1000);
				})
			},
			//拼团详细
			// groupBookingDetail(item){
			// 	var query={
			// 		id:this.commodityData.id,
			// 		name:item.name,
			// 		img_url:item.img_url,
			// 		maxtime:item.maxtime,//时间戳
			// 	}
			// 	this.$router.push({path:'/groupBookingDetail',query:query});
			// },
			//评论
			evaluation(){
				let commodityData = this.commodityData;
			  this.$router.push({path: '/Commodity_evaluations', query:{id:commodityData.id}})
			},
			//购买
			goodsPurchase() {
				this.show = true;
				this.source = 1;
			},
			//购物车
			shoppingTrolley() {
				this.show = true;
				this.source = 0;
			},
			//后退
			retreat() {
				if (window.history.length <= 1) {
					this.$router.push({path:'/'})
				} else {
					this.$router.go(-1);
				}
			},
			onClickRight() {
				this.$toast('功能');
			},
		},

		mounted() {
			this.startTimer();
		},
		components: {
			commdPurchase,
			loading,

		},


	}
</script>
<!--<style lang="scss" scoped> -->
<style lang="scss">
	.price {
		width: 100%;
		display: flex;

		//商品价格
		.price_left {
			width: 100%;
			color: #fff;
			background-color: #FF1B28;
			text-align: left;
			padding: 2% 2% 0 2%;

			.pl_top {
				color: #fff;
				display: flex;
				align-items: baseline;
				margin-bottom: 6px;

				.pl_text1 {
					font-size: 15px;
					font-weight: 600;
					margin-right: 9px;
				}

				.pl_text {
					border: 1px solid #FFFFFF;
					border-radius: 4px;
					display: inline-block;
					font-size: 12px;
					padding: 2px 8px;
					margin-right: 5px;
				}
			}

			.pl_bottom {
				display: flex;
				justify-content: space-between;
				align-items: baseline;

				.price_new {
					display: flex;
					align-items: baseline;

					.pl_in {
						font-size: 12px;
						font-weight: 100;
					}

					.pl_new {
						font-size: 18px;
						font-weight: bold;
					}

					.pl_old {
						vertical-align: bottom;
						text-decoration: line-through;
						display: inline-block;
						margin-left: 5px;
						font-size: 12px;
						line-height: 21px;
					}
				}
			}
		}	
	}

	.pl_text {
			border: 1px solid #FFFFFF;
			border-radius: 10px;
			display: inline-block;
			font-size: 0.628em;
			padding: 2px 8px;
		}
	.lunbo {
		margin-top: 40px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	// 提示 产品属性 电话
	.bg_onws {
		padding-bottom: 2%;
		background: #f7f7f7;

		//拼团列表
		.gb_info {
			font-size: 12px;
			color: #141414;

			.gb_hint {
				p {
					margin: 9px 0;
				}

				.gb_count {
					color: red;
				}
			}

			.gb_list {
				display: flex;
				justify-content: space-between;
				padding: 10px 0px;
				border-top: 1px solid #F5F5F5;

				.gb_user {
					display: flex;
				}

				.gb_tx {
					width: 34px;
					height: 34px;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 9px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.gb_nickname>p:nth-child(1) {
					color: #B2B2B2;
				}

				.gb_time_operation {
					display: flex;

					.van-button--normal {
						font-size: 12px;
						padding: 0 9px;
						line-height: 25px;
						margin-top: 3px;
						height: 25px;
					}

					.gb_time {
						margin-right: 12px;
					}

					.gb_time>p:nth-child(1) {
						font-size: 13px;
					}

					.gb_time>p:nth-child(2) {
						color: #A0A0A0;
					}
				}
			}


		}

		.sp_detone {
			padding: 1% 4% 1% 2%;
			background: #fff;
			margin-bottom: 2%;
			text-align: left;
		}

		.sp_text {
			color: #656565;
			font-size: 14px;
			margin: 15px 0;
		}
	}

	.sp_dettwo {
		background: #fff;
		overflow: hidden;
		font-size: 0;

		.spde_side {
			color: #333;
			font-size: 13px;
			margin: 7px;
			float: left;
		}

		.spde_cont {
			float: right;
			margin-right: 10px;
		}

		.spde_cont img {
			width: 10px;
			padding-top: 7px;
		}
	}

	.bg_onw {
		padding-bottom: 60px;
		background: #f7f7f7;
	}

	.spdd_color {
		color: rgb(182, 182, 182);
	}

	//发货
	.sp_detfour {
		background: #fff;
		padding: 1% 4% 1% 2%;
		margin-bottom: 2%;

		.spdd_one {
			overflow: hidden;
		}

		.spdd_one ul li {
			list-style-type: none;
			float: left;
			font-size: 12px;
			width: 100%;
			padding: 5px 0;
			text-align: left;
		}

		.spdd_side {
			width: 15%;
			float: left;
		}

		.spdd_cont {
			color: #333;
			margin-left: 2%;
			width: 83%;
			float: right;
		}

		.spdd_cont span {
			padding-right: 10px;
		}
	}

	//产品详情
	.sp_detfive {
		background: #fff;
		padding: 1% 4% 1% 2%;
		margin-bottom: 2%;

		.spd_tit {
			font-size: 14px;
			text-align: left;
		}

		.spd_center {
			font-size: 13px;

			img {
				width: 100%;
			}
		}
	}

// 购买
	.van-goods-action-button--first,
	.van-goods-action-button--last {
		border-radius: 0px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-right: 0;
	}
	.van-goods-action-icon{
		min-width: 69px;
	}
	.van-button__text{
		width: 100%;
	}
	.van-goods-action-button--first>span:nth-child(1),
	.van-goods-action-button--last>span:nth-child(1){
		font-weight:bold;
		font-size: 19px;
		
	}
	.van-goods-action-button--first>span:nth-child(2),
	.van-goods-action-button--last>span:nth-child(2){
		font-size: 12px;
	}
	.groupCommodityDetail{
		.van-nav-bar{
			background: #fff;
			.van-nav-bar__title{
				color:#333333;
			}
			.van-icon{
				color:#333333;
			}
		}
	}
	

	[class*='van-hairline']::after {
		border:none;
	}
	    
</style>
